<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Add Department</title>



<link href="/MockProject_J2/resources/css/bootstrap.min.css"
	rel="stylesheet">
<link href="/MockProject_J2/resources/css/dataTables.bootstrap.css"
	rel="stylesheet">
<script type="text/javascript"
	src="/MockProject_J2/resources/js/jquery.min.js"></script>
<script type="text/javascript"
	src="/MockProject_J2/resources/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="/MockProject_J2/resources/js/scripts.js"></script>
<script src="/MockProject_J2/resources/js/bootbox.js"></script>
<script type="text/javascript"
	src="/MockProject_J2/resources/js/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/ui-lightness/jquery-ui.min.css"/>  
<script type="text/javascript"
	src="/MockProject_J2/resources/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" 
	src="/MockProject_J2/resources/js/dataTables.bootstrap.js"></script>
<script type="text/javascript"  src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript"
	src="/MockProject_J2/resources/js/lookupscripts.js"></script>
<script>	

function updateAdree(addressID, postcode, townName, countyName, countryName) {
	$('#inputPostCode').val(postcode);
	$('#inputTown').val(townName);
	$('#inputCounty').val(countyName);
	$('#inputCountry').val(countryName);
	$("#inputAddress").val(addressID.split('-')[1]);
};

function Submit() {
	if (document.URL.indexOf("departId") != -1) {
		document.getElementById("form").action = "updatedepartment?direcId=${department.directorate.directorateID}";
	} else {
		document.getElementById("form").action = "adddepartment?direcId=${directorate.directorateID}";
	}
	
	var name = document.getElementById("inputName").value;
	var shortDes = document.getElementById("inputShort").value;
	var contactName = document.getElementById("inputContactName").value;
	var postCode = document.getElementById("inputPostCode").value;
	
	if (name == "") {
		alert("department name can't empty");
		return;
	}
	if (shortDes == "") {
		alert("department short description can't empty");
		return;
	}
	
	if (contactName == "") {
		alert("contact name can't empty");
		return;
	}
	
	if (postCode == "") {
		alert("PostCode can't empty");
		return;
	}
	
	document.getElementById("form").submit();
}

function handleClickCopyAddress(myRadio) {
    if (myRadio.value == "organisation") {
    	document.getElementById("inputAddress1").value = "${directorate.organisation.addressLine1}";
    	document.getElementById("inputAddress2").value = "${directorate.organisation.addressLine2}";
    	document.getElementById("inputAddress3").value = "${directorate.organisation.addressLine3}";
    	document.getElementById("inputPostCode").value = "${directorate.organisation.address.postCode}";
    	document.getElementById("inputTown").value = "${directorate.organisation.address.town.townName}";
    	document.getElementById("inputCountry").value = "${directorate.organisation.address.country.countryName}";
    	document.getElementById("inputCounty").value = "${directorate.organisation.address.county.countyName}";
    	document.getElementById("inputAddress").value = "${directorate.organisation.address.addressID}";
    }
    if (myRadio.value == "parent") {
    	document.getElementById("inputAddress1").value = "${directorate.addressLine1}";
    	document.getElementById("inputAddress2").value = "${directorate.addressLine2}";
    	document.getElementById("inputAddress3").value = "${directorate.addressLine3}";
    	document.getElementById("inputPostCode").value = "${directorate.address.postCode}";
    	document.getElementById("inputTown").value = "${directorate.address.town.townName}";
    	document.getElementById("inputCountry").value = "${directorate.address.country.countryName}";
    	document.getElementById("inputCounty").value = "${directorate.address.county.countyName}";
    	document.getElementById("inputAddress").value = "${directorate.address.addressID}";
    }
}

function defaultInfor() {
	if (document.URL.indexOf("direcId") != -1) {       //add new department
		document.getElementById("inActive").style.visibility="hidden";
		document.getElementById("inputBusiness").value = "${directorate.organisation.sic.typeOfBussiness}";
		document.getElementById("inputSICCode").value = "${directorate.organisation.sic.sicCode}";
		document.getElementById("inputWeb").value = "${directorate.organisation.webAddress}";
	} else {                         //update department
		document.getElementById("inActive").style.visibility="visible";
		document.getElementById("inputBusiness").value = "${typeBussiness}";
	} 
}

function inActiveDepartment() {
	bootbox.confirm(
					"This Department is already in use, do you want to make this in-active?",
					function(result) {
						if (result == true) {
							$.ajax({
										url : "inactivedepartment?departId="
												+ "${department.departmentID}",
										type : "GET",
										success : function() {
										}
									});
						} else {}
					});
}

</script>
</head>
<style>
body {
	font-size: 140%;
}

body {
	padding-top: 70px;
}
</style>
<body onload="defaultInfor();">
	<%@ include file="header.jsp"%>

	<div class="container">
	<h2>Department Details</h2>
	<hr>
	<div class="tabbable">
		<ul class="nav nav-tabs">
			<li class="active">
				<a href="#panel-132636" data-toggle="tab">Details</a>
			</li>
			
			<li class="row" style="float:right; margin-right:120px;">
				<button class="btn btn-primary btn-default" id="inActive"
				onclick="inActiveDepartment();" >In-Active </button>
			</li>
		</ul>
		
		<div class="tab-content">
			<div class="tab-pane active" id="panel-132636">
			<form:form class="form-horizontal" id="form"  method="post"  commandName="department">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">				
					<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
						<p></p>
						<form:input path="departmentID" type="hidden"/>
						<form:input path="isActive" type="hidden"/>
						<div class="form-group">
							 <label for="inputName" class="col-lg-4 control-label">Department Name<span style="color:red;">*</span></label>
							<div class="col-lg-6">
								<form:input path="departmentName" class="form-control" 
								 id="inputName" name="inputName" placeholder="" />
							</div>
						</div>
						<div class="form-group">
							 <label for="inputShort" class="col-lg-4 control-label">
							 	Department Short Description<span style="color:red;">*</span>
							 </label>
							<div class="col-lg-6">
								<form:textarea path="departmentShortDes"  class="form-control" name="inputShort" id="inputShort" />
							</div>
						</div>
						<div class="form-group">
							 <label class="col-lg-4 control-label">Lead Contact<span style="color:red;">*</span></label>
							<div class="col-lg-4">
								<form:input path="contact.firstName" id="inputContactName" class="form-control" disabled="true"/>
							</div>
							<a class="btn btn-primary btn-default" id="lookupcontact">
							<span class="glyphicon glyphicon-search"></span> Lookup</a>
						</div>			
						<div class="form-group">
							 <label class="col-lg-4 control-label">Copy Address from</label>
							<div class="col-lg-6">
								<input type="radio" onclick="handleClickCopyAddress(this);" 
								name="copyAddress" value="organisation" />&nbsp;&nbsp;Organisation&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<input type="radio" onclick="handleClickCopyAddress(this);" name="copyAddress" value="parent" />&nbsp;&nbsp;Parent
							</div>
						</div>
						<div class="form-group">
							 <label for="inputAddress1" class="col-lg-4 control-label">Address Line 1</label>
							<div class="col-lg-6">
								<form:input path="addressLine1" class="form-control" id="inputAddress1" name="inputAddress1" placeholder="" />
							</div>
						</div>
						<div class="form-group">
							 <label for="inputAddress2" class="col-lg-4 control-label">Address Line 2</label>
							<div class="col-lg-6">
								<form:input path="addressLine2" class="form-control" id="inputAddress2" name="inputAddress2" placeholder="" />
							</div>
						</div>
						<div class="form-group">
							 <label for="inputAddress3" class="col-lg-4 control-label">Address Line 3</label>
							<div class="col-lg-6">
								<form:input path="addressLine3" class="form-control" id="inputAddress3" name="inputAddress3" placeholder="" />
							</div>
						</div>
						<div class="form-group">
							 <label  class="col-lg-4 control-label">PostCode<span style="color:red;">*</span></label>
							<div class="col-lg-4">
								<form:input path="address.postCode" id="inputPostCode" class="form-control" disabled="true"/>
							</div>
								<a class="btn btn-primary btn-default" id="lookupadress">
								<span class="glyphicon glyphicon-search"></span> Lookup</a>
						</div>
						<div class="form-group">
							 <label for="inputTown" class="col-lg-4 control-label">Town/Village/City</label>
							<div class="col-lg-6">
								<form:input path="address.town.townName" class="form-control" id="inputTown"  disabled="true"/>
							</div>
						</div>
						<div class="form-group">
							 <label for="inputCounty" class="col-lg-4 control-label">County</label>
							<div class="col-lg-6">
								<form:input path="address.county.countyName" class="form-control" id="inputCounty" disabled="true" />
							</div>
						</div>
						<div class="form-group">
							 <label for="inputCountry" class="col-lg-4 control-label">National/Country</label>
							<div class="col-lg-6">
							    <form:input path="address.country.countryName" class="form-control" id="inputCountry" disabled="true"/>
						    </div>
						</div>
					</div>
					<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
						<p></p>
						<div class="form-group">
							 <label  class="col-lg-4 control-label">Type of Business</label>
							<div class="col-lg-4">
								<input id="inputBusiness" class="form-control" disabled="disabled"/>
							</div>
								<a class="btn btn-primary btn-default" id="lookupsic">
								<span class="glyphicon glyphicon-search"></span> Lookup</a>
						</div>
						<div class="form-group">
							 <label class="col-lg-4 control-label">SIC Code</label>
							<div class="col-lg-4">
								<form:input path="sicCode" class="form-control" id="inputSICCode" readonly="true"  placeholder="" />
							</div>
						</div>
						<div class="form-group">
							 <label for="inputFull" class="col-lg-4 control-label">Department Full Description</label>
							<div class="col-lg-6">
								<form:textarea path="departmentFullDes"  class="form-control" name="inputFull" id="inputFull" />
							</div>
						</div>
						<div class="form-group">
							 <label for="inputPhone" class="col-lg-4 control-label">Phone Number</label>
							<div class="col-lg-6">
								<form:input path="phoneNumber" class="form-control" id="inputPhone" name="inputPhone" placeholder="" />
							</div>
						</div>
						<div class="form-group">
							 <label for="inputFax" class="col-lg-4 control-label">Fax</label>
							<div class="col-lg-6">
								<form:input path="fax" class="form-control" id="inputFax" name="inputFax" placeholder="" />
							</div>
						</div>
						<div class="form-group">
							 <label for="inputEmail" class="col-lg-4 control-label">Email</label>
							<div class="col-lg-6">
								<form:input path="email" class="form-control" id="inputEmail" type="email" name="inputEmail" placeholder="" />
							</div>
						</div>
						<div class="form-group">
							 <label for="inputWeb" class="col-lg-4 control-label">Web Address</label>
							<div class="col-lg-6">
								<form:input path="webAddress" class="form-control" id="inputWeb" name="inputWeb" placeholder="" />
							</div>
						</div>
						
						<form:hidden path="address.addressID" id="inputAddress" />
						<form:hidden path="contact.contactID" id="inputcontactID" />
						<form:hidden path="directorate.directorateID"/>
					</div>
				</div>
				<div class="row">
							<div class="col-md-2 col-md-offset-5">
								<input type="button" onclick="Submit()" value="Save"class="btn btn-success btn-default">
								<input type="button" value="Back"
									onclick="location.href = 'amendDirectorate?directorateID=${directorate.directorateID}&orgID=${directorate.organisation.orgID}'"
									class="btn btn-danger btn-default">
							</div>
				</div>	
			</form:form>
		</div>
	  </div>
	 </div>
	</div>
	
	<%@ include file="footer.jsp"%>
	<div id="modaladdress" style="display: none;"></div>
	<div id="modalcontact" style="display: none;"></div>
	<div id="modalsic" style="display: none;"></div>
</body>
</html>